import React from 'react'
import { useExplainCode } from '@/hooks/useExplainCode'

export default function BackgroundPosition() {
  const oCode = useExplainCode();
  return (
    <div>
      <section ref={oCode}>
        <h3 className="font-semibold text-xl mb-1 ">背景定位</h3>
        <div className="mt-4 mb-4 p-4 rounded-md bg-yellow-50">
          <p>背景知识：
            <img className="inline-block h-5 align-middle" src="https://github.githubassets.com/images/icons/emoji/point_right.png" alt="point_right" />
            <a className="text-green-500" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position" target="_blank">background-position</a>,
            <a className="text-green-500" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin" target="_blank">background-origin</a>,
            <a className="text-green-500" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc" target="_blank">calc</a></p>
        </div>
      </section>
      <main className="border">
        <div className="block1">background-position方案</div>
        <div className="block2">background-origin方案</div>
        <div className="block3">calc方案</div>
      </main>
      <style jsx>{`
         main{
          width: 100%;
          padding: 80px 0px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
        }
        main div{
          width: 229px; height: 139px;
          margin: auto;
          margin-right: 5px;
          color: #f4f0ea;
          padding: 16px 29px 28px 20px;
          background: #b4a078 url('/favicon.ico') no-repeat bottom right / 78px 21px;
        }
        .block1{
          background-position: right 29px bottom 28px;
        }
        /* div:nth-of-type(2){ */
        .block2{
          background-origin: content-box;
          margin: 29px 0; /* 移动端纵向排列上下间距 */
        }
        .block3{
          margin-right: 0 !important;
          background-position: calc(100% - 29px) calc(100% - 28px);
        }
      `}</style>
    </div>
  )
}
